<template>
  <svg aria-hidden="true">
    <use :href="`#${iconClass(name)}`" />
  </svg>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getFileType } from '@/utils/utils'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'vsCodeIcon',
  props: {
    name: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup() {
    const iconClass = (name: string): string => {
      const fileType = getFileType(name)
      switch (fileType) {
        case 'vue':
          return 'wos-vue'
        case 'ts':
          return 'wos-typescript'
        case 'js':
          return 'wos-javascript'
        case 'ejs':
          return 'wos-ejs'
        case 'ico':
          return 'wos-favicon'
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
          return 'wos-image'
        case 'json':
          return 'wos-json'
        case 'doc':
        case 'docx':
          return 'wos-word'
        case 'ppt':
        case 'pptx':
          return 'wos-powerpoint'
        case 'xls':
        case 'xlsx':
          return 'wos-excel'
        case 'html':
          return 'wos-html'
        case 'svg':
          return 'wos-svg'
        case 'less':
          return 'wos-less'
        case 'css':
          return 'wos-css'
        case 'log':
          return 'wos-log'
        case 'py':
          return 'wos-python'
        case 'zip':
          return 'wos-zip'
        default:
          return 'wos-file'
      }
    }

    return {
      iconClass
    }
  }
})
</script>

<style scoped lang="scss">
svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
